<template>
    <div>

    <!-- breadcrumb-area start -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row breadcrumb_box  align-items-center">
                        <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
                            <h2 class="breadcrumb-title">我的收藏</h2>
                        </div>
                        <div class="col-lg-6  col-md-6 col-sm-12">
                            <!-- breadcrumb-list start -->
                            <ul class="breadcrumb-list text-center text-md-right">
                                <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
                                <li class="breadcrumb-item active">我的收藏</li>
                            </ul>
                            <!-- breadcrumb-list end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- breadcrumb-area end -->

    <!-- Wishlist Area Start -->
    <div class="cart-main-area pt-100px pb-100px">
        <div class="container">
            <h3 class="cart-page-title">你的收藏</h3>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                  <el-card>
                           <el-table :data="tableData"  stripe style="width: 100%" id="out-table">
                             <el-table-column prop="bookImages" label="图书图片" width="200">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="$store.state.imgURLPre+scope.row.bookImages" :preview-src-list="[$store.state.imgURLPre+scope.row.bookImages]">
            </el-image>
            </template>
      </el-table-column>
      <el-table-column prop="bookTitle" label="图书标题"></el-table-column>
      <el-table-column prop="bookNewPrice" label="现价" ></el-table-column>
       <el-table-column prop="addTime" label="收藏时间" width="200" sortable>
        <template slot-scope="scope">
          {{scope.row.addTime | dataFomart}}
         </template>

       </el-table-column>
        
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
               <el-button type="primary" icon="el-icon-search" circle @click="showDetail(scope.row)"></el-button>
                <el-button type="success" icon="el-icon-shopping-cart-2" circle @click="addCart(scope.row.id)"></el-button>
                <el-popconfirm
              @confirm="del(scope.row.id)"
              title="确定删除？"
          >
            <el-button type="danger" icon="el-icon-delete" circle slot="reference" style="margin-left: 10px"></el-button>
          </el-popconfirm>
          </template>
      </el-table-column>
    </el-table>
    </el-card>
            <el-row>
                <el-col>
                        <el-pagination
                         @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                        </el-pagination>
                </el-col>
            </el-row>
        </div>
            </div>
        </div>
    </div>
    <!-- Wishlist Area End -->

    <el-dialog :visible.sync="dialogVisible" width="50%">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-5 col-sm-12 col-xs-12 mb-lm-30px mb-sm-30px">
            <!-- Swiper -->
            <div class="swiper-container gallery-top mb-4">
              <img
                class="img-responsive m-auto"
                :src="$store.state.imgURLPre+info.bookImages"
                alt=""
              />
            </div>
          </div>
          <div class="col-md-7 col-sm-12 col-xs-12">
            <div class="product-details-content quickview-content">
              <h2>{{info.bookTitle}}</h2>
              <p class="reference">作者:<span>{{info.bookAuthors}}</span></p>
              <div class="pro-details-rating-wrap">
                <div class="rating-product">
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                </div>
                <span class="read-review"
                  ><a class="reviews" href="#">剩余数量({{info.bookQuantityInput-info.bookQuantityOutput}})</a></span
                >
              </div>
              <div class="pricing-meta">
                <ul>
                  <li class="old-price not-cut">￥{{info.bookNewPrice}}</li>
                </ul>
              </div>
              <p class="quickview-para" v-html="info.bookDescribe">
                
              </p>
              
              <div class="pro-details-quality">
                <div class="cart-plus-minus">
                  <input
                    class="cart-plus-minus-box"
                    type="text"
                    name="qtybutton"
                    v-model="count"
                  />
                </div>
                <div class="pro-details-cart btn-hover">
                  <button
                    class="add-cart btn btn-primary btn-hover-primary ml-4"
                    @click="addCart(info.id,count)"
                  >
                    添加到购物车
                  </button>
                </div>
              </div>
              <div class="pro-details-wish-com">
                
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    </div>
</template>

<script>
import API from "@/api/request";
const url = "/api/msslyyBook"
export default {
    name: 'BookShopWishlish',

    components: {  },

    directives: {  },

    data() {
        return {
            dialogVisible:false,
            tableData: [],
            info:{},
            pageNum: 1,
            pageSize: 10,
            total: 0,
            user:{},
            count:1,
        };
    },
    filters:{
     dataFomart(date){
       let dt = new Date(date);//实例化时间对象
       let y = dt.getFullYear();
       let m = dt.getMonth() + 1>10?(dt.getMonth()+ 1):"0"+(dt.getMonth()+ 1);
       let d = dt.getDate()>10?dt.getDate():"0"+dt.getDate(); 
       let hh=dt.getHours()>=10?dt.getHours():"0"+dt.getHours();
       let mm=dt.getMinutes()>=10?dt.getMinutes():"0"+dt.getMinutes();
       let ss=dt.getSeconds()>=10?dt.getSeconds():"0"+dt.getSeconds();
      //笨方法  return y + '-' + m + '-' + d
      //官方方法  注意引号，是tab键上面的符号（ES6的语法）
      return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
    },},
    mounted() {
        
    },
    created(){
        this.user = sessionStorage.getItem("user1")
      ? JSON.parse(sessionStorage.getItem("user1"))
      : {};
        this.load()
    },

    methods: {
         addCart(bookId,cartAmount=1){
      if (this.user) {
         API.post(`/api/msslyyCart/addCart/${this.user.id}/${bookId}/${cartAmount}`).then((res) => {
          this.$message({
          type: "success",
          message: "添加成功"
          })
          this.count=1
        
      });
      } else {
        this.$message({
          type: "danger",
          message: "请先登录"
        })
      }
    },
        showDetail(row){
            this.info=row
            this.dialogVisible=true
        },
         load() {
        API.get(url + "/getBookListById/"+this.user.id, {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.text
          }
       }).then(res => {
         if (res.data!==null) {
          this.tableData = res.data.records || [];
          this.total = res.data.total
        } else {
          this.tableData=[]
        }
       })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    del(id){
       API.get(`/api/msslyyWishlist/add/${id}/${this.user.id}`).then((res) => {
             if (res.code === "0") {
                 if (res.data===0) {
                     this.$message({
                        type: "info",
                        message: "取消收藏成功"
                        })
                        this.load();
                 }
                  
            }
                });
      },
    },
};
</script>

<style lang="scss" scoped>

</style>